<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
        }
    </style>
</head>
<body>
   <button id="btn">往右走</button>
   <button id="btn1">往左走</button>
   <div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {

        // 0. 变量
        var box = $("box");

        // 1. 监听按钮的点击
        $("btn").onclick = function () {
            buffer(box, "left",  800);
        };

        $("btn1").onclick = function () {
            buffer(box, "height", 800);
        };
    };

    function buffer(obj, attr, target) {
        // 1.1 清除定时器
        clearInterval(obj.timer);

        // 1.2 设置定时器
        obj.timer = setInterval(function () {
            // 1.3.1 获取初始值
            var begin = parseInt(getCSSAttrValue(obj, attr));
            console.log(begin);

            // 1.3 求出步长
            var speed = (target - begin) * 0.2;
            // 判断是否向上取整
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
            // 1.4 动起来
            obj.style[attr] = begin + speed + "px";
            obj.innerText = begin;
            // 1.5 判断
            if(begin === target){
                clearInterval(obj.timer);
            }
        }, 20);
    }
</script>
</body>
</html>